<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<script src="http://img.mukewang.com/down/541f6ff70001a0a500000000.js" type="text/javascript"></script>

<title></title>
</head>
<body>
    
<div id="target">
  点击触发事件回调
</div>


<img id="book" alt="" width="100" height="123"
  style="position: relative; left: 10px;background:#ccc" />

<div id="clickme">
  点击动画等待动画结束后回调
</div>

<script type="text/javascript">


//同步回调
function callback(args, fn) {
  var args = args * 2;
  fn(args);
}

callback(2, function(value) {
  alert(value)
})


//异步事件回调
$("#target").click(function() {
  alert("触发回调函数");
});

//异步动画回调
$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 1000, function() {
    alert('动画结束回调')
  });
});

</script>
</body>
</html>















